<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
const value = ref("站内");
const list = ref([]);
const listType = ref({ id: 1 });
const inpArr = ref([]);
const inp = ref([]);
const style = ref({
  display: "none",
});
const inpVal = ref("");

const getSearchList = async () => {
  let { data } = await axios.get("http://localhost:3000/searchList");
  // console.log(data)
  list.value = data;
  return data;
};
onMounted(async () => {
  const data = await getSearchList();
  console.log(data);
  // console.log(typeof(getSearchList()),getSearchList().PromiseResult)
  active(data[0].id);
});

function active(id) {
  console.log(list.value);
  listType.value = list.value.find((item) => item.id == id);
  console.log(listType.value);
  inpArr.value = listType.value.type;
  console.log(inpArr.value);
  inp.value = inpArr.value[0];
  console.log(inp.value);
}
function inpActive(id) {
  inp.value = inpArr.value.find((item) => item.id == id);
}

function searchFn(val) {
  if (inpVal.value != "" || inpVal.value.length > 0) {
    window.open(`${val}${inpVal.value}`, "_blank");
  } else {
    ElMessage.warning("请输入你需要搜索的内容");
  }
}
</script>

<template>
  <div class="search">
    <div class="top">
      <el-select
        v-model="value"
        :placeholder="listType.name"
        size="large"
        style="width: 90px;border: none;box-shadow: none; outline:none;"
        placement="bottom"
      >
        <el-option
          v-for="item in list"
          :key="item.id"
          :label="item.name"
          :value="item.name"
          @click="active(item.id)"
        />
      </el-select>
      <ul class="inpUl">
        <li
          v-for="item in listType.type"
          :key="item.id"
          @click="inpActive(item.id)"
          :class="inp.id == item.id ? 'active' : ''"
          :style="item.id == 'zn1' ? style : ''"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div class="inp">
      <input
        type="text"
        :placeholder="inp.note"
        v-model="inpVal"
        @keyup.enter="searchFn(inp.url)"
      />
      <i class="iconfont icon-sousuo" @click="searchFn(inp.url)"></i>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/comStyle/search/searchTop.scss");
.el-select-dropdown {
  display: flex; /* 需要设置为 flex-column 垂直排列 */
  flex-direction: column;
}

</style>
<style>
.el-scrollbar__view.el-select-dropdown__list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item{
  display: flex;
  justify-content: center;
  padding:0 20px;
}
.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger{
  box-shadow: none;
  border-radius: 5px 5px 0 0 ;
  background-color: #f2f2f2;
}

</style>
